//  任务进度条

import React, { Fragment } from 'react';
import { Modal, Progress, Button } from 'antd';
import Result from '@/components/Result';
import downloadFile from '@/utils/utils';
import styles from '@/utils/utils.less';

class EsTaskProgress extends React.PureComponent {
  // 关闭弹框
  closeModal = () => {
    const { handleProgressModalVisible, closeModalCallBack } = this.props;
    handleProgressModalVisible(false);
    if (closeModalCallBack) {
      closeModalCallBack();
    }
  };

  render() {
    const {
      progressTitle = '任务进度',
      progressPercent,
      progressVisible,
      isShowResult,
      resultInfo,
    } = this.props;

    const information = (
      <div className={styles.resultInfo} style={{ lineHeight: '32px' }}>
        {resultInfo.batchName ? (
          <div>
            <span span={4} className={styles.label}>
              任务名称：{resultInfo.batchName}
            </span>
          </div>
        ) : null}
        <div>
          <span span={4} className={styles.label}>
            任务总数：{resultInfo.taskCount}
          </span>
        </div>
        <div>
          <span span={4} className={styles.label}>
            成功数据：{resultInfo.successCount}
          </span>
        </div>
        {resultInfo.errorCount ? (
          <div>
            <span span={4} className={styles.label}>
              失败数据：{resultInfo.errorCount}
            </span>
            <Button
              onClick={() => downloadFile(resultInfo.errorParams, resultInfo.errorUrl, 'POST')}
            >
              下载
            </Button>
          </div>
        ) : null}
      </div>
    );
    const actions = (
      <Fragment>
        <Button type="primary" onClick={this.closeModal}>
          关闭
        </Button>
      </Fragment>
    );
    return (
      <Modal
        title={isShowResult ? `${progressTitle}结果` : progressTitle}
        footer={null}
        closable={false}
        visible={progressVisible}
        onCancel={this.closeModal}
      >
        <div style={{ textAlign: 'center' }}>
          {isShowResult ? (
            <Result
              type="success"
              title="操作成功"
              extra={information}
              actions={actions}
              className={styles.result}
            />
          ) : (
            <div>
              <Progress
                percent={progressPercent}
                format={percent => `${percent}%`}
                style={{ paddingRight: 24, marginBottom: 20 }}
              />
              <Button onClick={this.closeModal}>关闭</Button>
            </div>
          )}
        </div>
      </Modal>
    );
  }
}

export default EsTaskProgress;
